<template>
  <div class="body">
    <div class="left">
        <div class="router">
			<user-info :userInfo="userInfo" :fansGroup="fansGroup"></user-info>
            <!-- <div class="operation">
                <router-link v-for="(item,index) in routerData" :key="index" :to="item.to" class="link">{{ item.label }}</router-link>
            </div> -->
		</div>
        <div class="content">
            <el-breadcrumb class="nav" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="(item,index) in navList" :key="index" :to="{ path: item.to }">{{ item.label }}</el-breadcrumb-item>
            </el-breadcrumb>
            <router-view></router-view>
        </div>
    </div>
    <div class="right">
        <div class="item-box chengjiu">
            <div class="title">个人成就</div>
            <div class="text">
                <div class="item">
                    <span class="icon iconfont icon-dianzan"></span>
                    <div class="num">获取点赞数 <span class="green">300</span></div>
                </div>
                <div class="item">
                    <span class="icon el-icon-view"></span>
                    <div class="num">文章被阅读 <span class="green">12300</span></div>
                </div>
                <div class="item">
                    <span class="icon iconfont icon-qianbao"></span>
                    <div class="num">获取硬币 <span class="green">8722</span></div>
                </div>
            </div>
        </div>
    </div>

  </div>
</template>
<script>
    import userInfo from '@/components/user/userInfo.vue'
    import {
		mapState
	} from 'vuex'
	export default {
        components:{
            userInfo
        },
        computed: mapState(['isLogin','userInfo']),
        watch:{
            $route(){
                this.navList[1].label = this.$route.name
            }
        },
		data(){
			return {
                navList:[
                    {
                        to: '/user',
                        label: '用户中心'
                    },
                    {
                        label: this.$route.name
                    }
                ],
                routerData: [
                    {
                        label: '文章',
                        to: '',
                        icon: ''
                    },
                    {
                        label: '资源',
                        to: '',
                        icon: ''
                    },
                    {
                        label: '问答',
                        to: '',
                        icon: ''
                    },
                    {
                        label: '评论',
                        to: '',
                        icon: ''
                    }
                ],
                fansGroup: [
                    {
                        label: '关注量',
                        value: '343'
                    },
                    {
                        label: '粉丝',
                        value: '34343'
                    },
                    {
                        label: '动态数',
                        value: '343'
                    },
                    {
                        label: '博客数',
                        value: '343'
                    }
                ],
                userId: this.$route.query.id,
			};
        },
		methods: {
           
        },
        mounted() {
            console.log(this.$route.path,this.$route.name)
            if(this.userId && this.userId != this.userInfo.id) {
                console.log(this.userId)
            }
            console.log(this.userId)
        }
    }
</script>

<style lang="scss" scoped>

	.body {
		width: 1200rem;
		height:100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding-top: 20rem;
        margin:83rem auto 0;
		.left {
            width: 940rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            max-width: 100%;
            .router {
                box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
                border-radius: 6rem;
                height: 160rem;
                background: #fff;
                padding: 0 30rem;
                .operation {
                    width: 100%;
                }
            }
            .content {
                box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
                border-radius: 6rem;
                flex: 1;
                min-height: 600rem;
                margin-top: 20rem;
                background: #fff;
                .nav {
                    padding-left: 20rem;
                    height: 60rem;
                    display: flex;
                    align-items: center;
                    border-bottom: 1rem solid #eee;
                }
            }
		}
		.right {
            width: 240rem;
            .item-box {
                width: 100%;
                background:#fff;
                box-shadow: 0rem 2rem 12rem 6rem rgba(3,5,27,0.06);
                border-radius: 6rem;
                .title {
                    width: 100%;
                    height: 40rem;
                    display: flex;
                    align-items: center;
                    border-bottom: 1rem solid #eee;
                    box-sizing: border-box;
                    padding: 0 6rem;
                    font-weight: 600;
                    padding-left: 12rem;
                    img {
                        width: 30rem;
                        height: 30rem;
                        margin-right: 10rem;
                    }
                }
                .text {
                    .item {
                        display: flex;
                        align-items: center;
                        .icon {
                            font-size: 30rem;
                            margin-right: 10rem;
                            margin-left:10rem;
                            color: $color;
                        }
                        .el-icon-view {
                            font-size: 28rem;
                        }
                        .num {
                            font-size: 14rem;
                            // color: $color;
                        }
                    }
                }
            }
            .chengjiu {
                width: 100%;
            }

		}

    }
    @media screen and (max-width: 750px) {

        .body {
            .left {
                flex:1;
                
                .router {
                    height: 180rem;
                }
            }
            .right {
                display: none;
            }
        }
    }

</style>
